<template>
  <div class="pmenu">
    <div style="display: flex; margin-left: 10px">
      <div class="menu" @click="choose(1)" :class="{ active: activeName === 1 ? true : false }">
        推荐
      </div>
      <div class="menu" @click="choose(2)" :class="{ active: activeName === 2 ? true : false }">
        最新
      </div>
      <div class="menu" @click="choose(3)" :class="{ active: activeName === 3 ? true : false }">
        待解答
      </div>
    </div>
    <div style="margin-right: 20px; margin-top: 5px; display: flex">
      <el-input placeholder="搜索问答" style="height: 30px">
        <template #append>
          <el-button :icon="Search" style="height: 30px" />
        </template>
      </el-input>
      <button class="btn" @click="filter">
        <el-icon style="margin-right: 5px"><ArrowDownBold /></el-icon>筛选
      </button>
    </div>
  </div>
  <div style="background: #fff; width: 100%; padding: 30px 0" v-if="isFilter">
    <div class="filter">
      <div class="row">
        <div class="type">回答情况:</div>
        <div class="pitem">
          <div
            class="item"
            @click="chooseType(0)"
            :class="{ activeType: search.type === 0 ? true : false }"
          >
            全部
          </div>
          <div
            class="item"
            @click="chooseType(1)"
            :class="{ activeType: search.type === 1 ? true : false }"
          >
            无回答
          </div>
        </div>
      </div>
      <div class="row">
        <div class="type">提问时间:</div>
        <div class="pitem">
          <div
            class="item"
            v-for="time of times"
            :key="time.id"
            @click="chooseTime(time.id)"
            :class="{ activeTime: search.time === time.id }"
          >
            {{ time.name }}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="type">提问标签:</div>
        <div>
          <el-select
            v-model="search.tagId"
            multiple
            filterable
            :loading="loading"
            default-first-option
            :reserve-keyword="false"
            placeholder="输入并选择标签"
            style="width: 400px; height: 32px"
          >
            <el-option
              v-for="item in props.tagList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
            <template #loading>
              <el-icon class="is-loading">
                <svg class="circular" viewBox="0 0 20 20">
                  <g
                    class="path2 loading-path"
                    stroke-width="0"
                    style="animation: none; stroke: none"
                  >
                    <circle r="3.375" class="dot1" rx="0" ry="0" />
                    <circle r="3.375" class="dot2" rx="0" ry="0" />
                    <circle r="3.375" class="dot4" rx="0" ry="0" />
                    <circle r="3.375" class="dot3" rx="0" ry="0" />
                  </g>
                </svg>
              </el-icon>
            </template>
          </el-select>
        </div>
        <div>
          <button class="filterBtn" @click="searchSubmit">筛选</button>
          <button class="resetBtn" @click="reset">重置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, ArrowDownBold } from '@element-plus/icons-vue'

const props = defineProps({
  tagList: {
    type: Array,
    default: null
  }
})

const activeName = ref(1)
const loading = ref(false)
const isFilter = ref(false)
const emit = defineEmits(['query', 'select','refresh'])

const times = ref([
  { id: 0, name: '不限' },
  { id: 1, name: '一周内' },
  { id: 2, name: '一月内' },
  { id: 3, name: '三月内' },
  { id: 4, name: '一年内' }
])

const search = ref({
  type: null,// 0-全部，1-未解答
  time: null,// 0-不限，1-一周年，2-一月内，3-三月内，4-一年内
  tagId: null// 标签数组
})
const searchSubmit = () => {
  emit('select', search.value)
}

const choose = (id) => {
  activeName.value = id
  emit('query', activeName.value)
}
const filter = () => {
  isFilter.value = !isFilter.value
}
const chooseType = (type) => {
  search.value.type = type
}
const chooseTime = (id) => {
  search.value.time = id
}
const reset = () => {
  search.value = {
    type: null,
    time: null,
    tagId: null
  }
  emit('refresh')
}
</script>

<style scoped>
.pmenu {
  width: 100%;
  height: 40px;
  display: flex;
  background: #fff;
  border-bottom: 3px #eee solid;
  justify-content: space-between;
}
.menu {
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.menu:hover {
  cursor: pointer;
}
.active {
  border-bottom: #00b7ff 3px solid;
  color: #00b7ff;
}
.btn {
  height: 30px;
  border: none;
  width: 100px;
  background: none;
}

.btn:hover {
  background: none;
  color: #00b7ff;
  cursor: pointer;
}
.filter {
  background: #fff;
  width: 90%;
  padding: 10px;
  margin-left: 5%;

  box-shadow: 5px 5px 10px 5px rgba(198, 198, 198, 0.5);
  color: #848484;
}
.activeType,
.activeTime {
  border: #00b7ff 1px solid;
  color: #00b7ff;
}

.row {
  display: flex;
}
.type {
  width: 100px;
  text-align: center;
  height: 50px;
}
.pitem {
  display: flex;
}
.item {
  width: 90px;
  text-align: center;
  height: 25px;
  margin-right: 10px;
}
.filterBtn {
  border: none;
  background: #00b7ff;
  color: #fff;
  font-size: 16px;
  height: 32px;
  width: 100px;
  margin-left: 10px;
}
.resetBtn {
  border: 1px #eee solid;
  background: #fff;
  color: #000;
  font-size: 16px;
  height: 32px;
  margin-left: 10px;
  width: 100px;
}
.item:hover {
  border: #00b7ff 1px solid;
  color: #00b7ff;
  cursor: pointer;
}
</style>
